 
<template>
  <div id="app">
    <RouterView />
  </div>
</template>

<script setup>
import { reactive, toRefs } from 'vue'
import { useRouter, RouterView } from 'vue-router'
const router = useRouter()
const state = reactive({
  transitionName: 'slide-left'
})
router.beforeEach((to, from) => {
  if (to.meta.index > from.meta.index) {
    state.transitionName = 'slide-left' // 向左滑动
  } else if (to.meta.index < from.meta.index) {
    // 由次级到主级
    state.transitionName = 'slide-right'
  } else {
    state.transitionName = ''   // 同级无过渡效果
  }
})
</script>

<style lang="less">
html, body {
  
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  
}
#app {
  min-height: 100vh;
  background: #f1f1f1;
  color: black;
}
 
a{
  color: unset;
  text-decoration: none;
}
.table-div {
     
    height: 45vh;
    overflow-y: auto;
}

.icon {
    width: 30px;
    height: 30px;
}

.table-div table {
    width: 100%;
    text-align: center;
}

.table-div th {
    background: #c9e2f8 !important;
    color: rgb(51, 94, 211);
    padding: 10px 0;
    font-size: 1.2em;
}
 
.table-div th {
    position: sticky;
    top: -1px;
}

.table-div td {
    background: white;
    font-size: 1.2em;
    padding: 5px 0;
}
.table-div:after {
    content: '';
    height: 50px;
    display: block;
    background: white;
}
</style>

